<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">课程详情</block>
		</cu-custom>
		<view class="container" v-if="course.name">
			<view class="info-box">
				<view class="title">
					<view class="course-title">{{course.name}}</view>
					<view class="deletecourse" @click="deletecourse">点击可删除该课程</view>
				</view>
				<view class="info-list">
					<view class="info-item">
						<view class="info-item__key" :style="{'color':course.color }">
							周数
						</view>
						<view class="info-item__val">
							{{course.week}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-item__key" :style="{'color':course.color }">
							节数
						</view>
						<view class="info-item__val">
							{{time}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-item__key" :style="{'color':course.color }">
							地点
						</view>
						<view class="info-item__val">
							{{course.address}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-item__key" :style="{'color':course.color }">
							老师
						</view>
						<view class="info-item__val">
							{{course.teacher}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_course', ['courseinfo']),
			...mapState('m_user', ['token'])
		},
		data() {
			return {
				course: {},
				time: '',
				index: 0,
				second:2,
				weekIndexText: ['一', '二', '三', '四', '五', '六', '日'],
			};
		},
		onLoad(options) {
			const dataStr = options.data;
			const data = JSON.parse(decodeURIComponent(dataStr));
			this.course = data
			this.index = options.index
			this.time = "周" + this.weekIndexText[this.course.day - 1] + this.course.begin + "-" + this.course.end + '节'
		},
		methods: {
			...mapMutations('m_course', ['updateCourseInfo']),
			async deletecourse() {
				this.courseinfo.splice(this.index, 1);
				const data = await uni.$http.post('/update/updatecourseinfo', {
					token: this.token,
					courseinfo: this.courseinfo
				})
				if (data.data.status === 0) {
					this.updateCourseInfo(this.courseinfo)
					const timer = setInterval(() => {
						this.second--;
						uni.showToast({
							title: '删除成功!',
							icon: 'success',
							duration: 1000
						});
						if (this.second <= 0) {
							clearInterval(timer)
							uni.navigateBack()
							return
						}
						uni.showToast({
							title: '删除成功！',
							icon: 'success',
							duration: 1000
						});
					}, 1000)

				} else {
					return uni.showToast({
						title: data.data.message,
						icon: 'error',
						duration: 1500
					});
				}

			}
		}
	}
</script>

<style lang="less">
	.info-box {
		background-color: #fff;
		padding: 30rpx 30rpx 0;
	}

	.course-title {
		font-size: 40rpx;

	}

	.info-list {
		margin-top: 10rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
	}

	.info-item {
		border-bottom: 1rpx solid rgba(243, 243, 243, 0.82);
	}

	.info-item__key {
		margin-right: 40rpx;
	}

	.info-item__val {
		color: #666666;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 7rpx solid #2C73D2;

		.deletecourse {
			color: #E0E3DA;
			font-size: 30rpx;
		}
	}
</style>